<template>
    <el-container style="height: 100vh;">
      <!-- 主内容区域 -->
      <el-main class="main-content">
        <!-- 搜索框 -->
        <div class="search-container">
          <el-input 
            v-model="searchQuery" 
            placeholder="请输入搜索内容" 
            prefix-icon="el-icon-search" 
            @input="handleSearch"
            style="width: 300px;"
          >
          </el-input>
          <el-button type="primary" @click="searchPosts" class="search-btn">搜索</el-button>
        </div>
  
        <!-- 帖子列表 -->
        <div class="share-page">
          <el-card v-for="(post, index) in filteredPosts" :key="index" class="post-card" shadow="hover">
            <!-- 帖子头部：用户头像和信息 -->
            <div class="post-header">
              <el-avatar :src="post.avatar" size="small" class="avatar"></el-avatar>
              <div class="user-info">
                <span class="username">{{ post.username }}</span>
                <span class="post-time">{{ post.time }}</span>
              </div>
            </div>
  
            <!-- 帖子标题 -->
            <div class="post-title">
              <span>{{ post.title }}</span>
            </div>
  
            <!-- 帖子内容 -->
            <div class="post-content">
              <p>{{ post.content }}</p>
  
              <!-- 图片展示 -->
              <div v-if="post.images.length" class="post-images">
                <el-image
                  v-for="(image, imgIndex) in post.images"
                  :key="imgIndex"
                  :src="image"
                  class="post-image"
                  fit="cover"
                ></el-image>
              </div>
  
              <!-- 视频展示 -->
              <div v-if="post.videos.length" class="post-videos">
                <video 
                  v-for="(video, videoIndex) in post.videos" 
                  :key="videoIndex"
                  :src="video"
                  controls 
                  class="post-video"
                ></video>
              </div>
            </div>
  
            <!-- 帖子操作：点赞和评论 -->
            <div class="post-footer">
              <el-button type="text" class="like-btn" @click="likePost(index)">
                👍 {{ post.likes }}
              </el-button>
              <el-button type="text" class="comment-btn" @click="toggleCommentForm(index)">
                💬 评论
              </el-button>
            </div>
  
            <!-- 评论表单 -->
            <div v-if="post.showCommentForm" class="comment-form">
              <el-input 
                v-model="post.newComment" 
                type="textarea" 
                placeholder="请输入评论内容..." 
                rows="4"
                class="comment-input"
              ></el-input>
              <el-button type="primary" @click="submitComment(index)" class="submit-btn">提交评论</el-button>
            </div>
  
            <!-- 显示评论列表 -->
            <div v-if="post.comments.length" class="comment-list">
              <h4>评论:</h4>
              <el-divider></el-divider>
              <el-card v-for="(comment, commentIndex) in post.comments" :key="commentIndex" class="comment-card">
                <div class="comment-author-time">
                  <span class="comment-author">{{ comment.author }}</span>
                  <span class="comment-time">{{ comment.timestamp }}</span>
                </div>
                <div class="comment-content">{{ comment.content }}</div>
              </el-card>
            </div>
          </el-card>
        </div>
      </el-main>

    </el-container>
  </template>
  
  <script setup>
  import { ref, computed } from 'vue';
  import { ElInput, ElButton, ElCard, ElAvatar, ElImage, ElDivider } from 'element-plus';
  
  // 模拟的分享帖子数据
  const posts = ref([
    {
      avatar: 'https://th.bing.com/th?id=OIP.ZnEsCrEtF44mPKVGMJS3qwAAAA&w=250&h=250&c=8&rs=1&qlt=90&o=6&dpr=1.9&pid=3.1&rm=2', // 用户头像
      username: '张三',
      time: '2024-10-20 12:00',
      title: '分享我的旅行经历',
      content: '这是我最近的旅行体验，真是太美了！',
      images: ['https://th.bing.com/th?id=OIP.ZnEsCrEtF44mPKVGMJS3qwAAAA&w=250&h=250&c=8&rs=1&qlt=90&o=6&dpr=1.9&pid=3.1&rm=2'],
      videos: ['https://www.w3schools.com/html/mov_bbb.mp4'],
      likes: 10,
      comments: [
        { author: '李四', timestamp: '2024-10-20 12:30', content: '真不错！' },
        { author: '王五', timestamp: '2024-10-20 13:00', content: '很美！' },
      ],
      newComment: '',
      showCommentForm: false,
    },
    {
      avatar: 'https://th.bing.com/th?id=OIP.ZnEsCrEtF44mPKVGMJS3qwAAAA&w=250&h=250&c=8&rs=1&qlt=90&o=6&dpr=1.9&pid=3.1&rm=2',
      username: '李四',
      time: '2024-10-19 08:30',
      title: '分享我的读书心得',
      content: '最近读了一本书，推荐给大家。',
      images: [],
      videos: ['https://www.w3schools.com/html/mov_bbb.mp4'],
      likes: 5,
      comments: [],
      newComment: '',
      showCommentForm: false,
    }
  ]);
  
  // 搜索相关
  const searchQuery = ref('');
  const filteredPosts = computed(() => {
    return posts.value.filter(post => 
      post.title.includes(searchQuery.value) || post.content.includes(searchQuery.value)
    );
  });
  
  // 搜索函数
  const handleSearch = () => {
    // 这个函数可以触发搜索时的逻辑
    console.log('Searching for:', searchQuery.value);
  };
  
  // 提交评论
  const submitComment = (index) => {
    const post = posts.value[index];
    if (post.newComment.trim()) {
      post.comments.push({
        author: '游客',
        timestamp: new Date().toLocaleString(),
        content: post.newComment,
      });
      post.newComment = ''; // 清空评论框
    }
  };
  
  // 显示/隐藏评论表单
  const toggleCommentForm = (index) => {
    posts.value[index].showCommentForm = !posts.value[index].showCommentForm;
  };
  
  // 点赞操作
  const likePost = (index) => {
    posts.value[index].likes += 1;
  };
  </script>
  
  <style scoped>
  .main-content {
    padding: 20px;
  }
  
  .search-container {
  position: fixed;
  top: 20px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 1000;
  display: flex;
  align-items: center;
}

.el-input {
  margin-right: 10px;
}

/* 按钮样式 */
.search-btn {
  height: 36px;
  line-height: 36px;
}
  .share-page {
    display: flex;
    flex-direction: column;
    gap: 20px;
  }
  
  .post-card {
    padding: 20px;
    border-radius: 10px;
    background-color: #f9f9f9;
  }
  
  .post-header {
    display: flex;
    align-items: center;
  }
  
  .avatar {
    margin-right: 10px;
  }
  
  .user-info {
    display: flex;
    flex-direction: column;
  }
  
  .post-title {
    font-size: 18px;
    font-weight: bold;
    margin: 10px 0;
  }
  
  .post-content {
    margin: 10px 0;
  }
  
  .post-images, .post-videos {
    margin: 10px 0;
  }
  
  .post-footer {
    display: flex;
    justify-content: space-between;
    margin-top: 10px;
  }
  
  .comment-form {
    margin-top: 10px;
  }
  
  
  .comment-list {
    margin-top: 20px;
  }
  </style>
  